<template>
  <div>
    <div class="cpmt_title">{{ name }}</div>
    <component :is="cmpt"> </component>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUpdate, onUpdated, markRaw, reactive, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { cmpts } from "./requireCmpt";

const route = useRoute();
//响应式变量
let cmpt = ref();
let name = ref();
//响应式变量

// 生命周期

onMounted(() => {
  console.log("moument");
  setTimeout(function () {
    cmpt.value = markRaw(cmpts[route.params.cmpt]);
    name.value = route.query.name;
  }, 1000);
});

onUpdated(() => {
  console.log("onUpdated");
  nextTick(() => {
    cmpt.value = markRaw(cmpts[route.params.cmpt]);
    name.value = route.query.name;
  });
});

// 生命周期
</script>
<style lang="scss" scoped>
$Black: #000000;
$White: #fff;

$fs13: 13px;
$fs20: 20px;
$fsNormal: normal;
$fwBold: bold;

.cpmt_title {
  margin-bottom: 15px;
  font-size: $fs20;
  font-weight: $fwBold;
}

// 暗黑模式
.dark {
}
</style>